@import 'function';

/* BEM
 -------------------------- */
// for namespaced components
@mixin B($block) {
  $B: $namespace + '-' + $block !global;

  .#{$B} {
    @content;
  }
}

// for normal blocks
@mixin b($block) {
  $B: $block !global;

  .#{$B} {
    @content;
  }
}

@mixin e($element) {
  $E: $element !global;
  $selector: &;
  $currentSelector: '';
  @each $unit in $element {
    $currentSelector: #{$currentSelector + '.' + $B + $element-separator + $unit + ','};
  }

  @if hitAllSpecialNestRule($selector) {
    @at-root {
      #{$selector} {
        #{$currentSelector} {
          @content;
        }
      }
    }
  } @else {
    @at-root {
      #{$currentSelector} {
        @content;
      }
    }
  }
}

@mixin m($modifier) {
  $selector: &;
  $currentSelector: '';
  @each $unit in $modifier {
    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ','};
  }

  @at-root {
    #{$currentSelector} {
      @content;
    }
  }
}


@mixin when($state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}

@mixin font-style{
    font-family:'armonyOS Sans SC, HarmonyOS Sans SC,Microsoft YaHei';
    font-weight: 400;
}

@mixin textarea-placeholder{
    font-family: 'armonyOS Sans SC, HarmonyOS Sans SC,Microsoft YaHei';
    font-weight: 400;
	font-size: 14px;
	color: #333333;
}
@mixin flex-row{
    display: flex;
    align-items: center;
}
@mixin cursor-style{
    cursor: pointer;
}

@mixin box-style{
    box-sizing: border-box;
}

@mixin  input-nubmer {
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }
}

@mixin prompt-wrap{
	.textarea-wrap{
		textarea{
			width: 100%;
			// height: 120px;
			padding: 10px 15px;
			resize: none;
			background: #F0F3F4;
			border-radius: 10px 10px 10px 10px;
			border: 1px solid #CFDDE1;
			box-sizing: border-box
		}
	}
}

@mixin  art-wrap{
	ul{
		@include flex-row;
		justify-content: space-between;
		flex-wrap: wrap;
		li{
			@include cursor-style;
			@include flex-row;
			justify-content: space-between;
			width: 48%;
			height: 70px;
			padding: 22px 12px;
			margin-bottom: 10px;
			background: #F0F3F4;
			border-radius: 10px 10px 10px 10px;
			box-sizing: border-box;
			span{
				padding: 5px 15px;
				@include font-style;
				background: #D4D9DB;
				border-radius: 60px 60px 60px 60px;
				font-size: 16px;
				color: #FFFFFF;
			}
			img{
				display: block;
				width: 42px;
				height: 42px;
			}
		}
		
		.current{
			background: #DDF7FF;
			span{
				background: #80DDFF;
			}
		}
	}
}


